<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>天气预报</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset-1.0.0.css" />
    <script src="http://js.h5course.cn/jquery-1.11.3.min.js" type="text/javascript"></script>
	<style>
		html,
		body,
		.wrap {
			height: 100%;
		}
		.wrap {
			width: 400px;
			margin: 0 auto;
		}
		.wrap li {
			line-height: 30px;
			font-size: 18px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li><img src="" alt="" title=""></li>
			<li><img src="" alt="" title=""></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>	
	</div>
	<script>
		var script = document.createElement('script');
		script.src="http://api.map.baidu.com/telematics/v3/weather?location=118.101064,24.492243&output=json&ak=iK8fjVzLngpY0s4lRSv0x6HY&callback=update";
		document.body.appendChild(script);
		function update(data){
			console.log(data);
			$("ul li").eq(0).text(data.results[0].currentCity);
			$("ul li").eq(1).text(data.results[0].index[0].title + ":" + data.results[0].index[0].des);
			$("ul li").eq(2).text(data.results[0].weather_data[0].date);
			$("ul img").eq(0).attr("src", data.results[0].weather_data[0].dayPictureUrl);
			$("ul img").eq(1).attr("src", data.results[0].weather_data[0].nightPictureUrl);
			$("ul li").eq(5).text(data.results[0].weather_data[0].weather);
			$("ul li").eq(6).text(data.results[0].weather_data[0].wind);
			$("ul li").eq(7).text(data.results[0].weather_data[0].temperature);

		}

	</script>
</body>
</html>